<template>
  <div :data-theme="theme" class="tech-panel">
    <canvas ref="canvas" class="canvas-border"></canvas>

    <!-- 四角装饰 -->
    <svg class="corner top-left" viewBox="0 0 100 100">
      <polyline points="0,100 0,0 100,0" />
    </svg>
    <svg class="corner top-right" viewBox="0 0 100 100">
      <polyline points="100,100 100,0 0,0" />
    </svg>
    <svg class="corner bottom-left" viewBox="0 0 100 100">
      <polyline points="0,0 0,100 100,100" />
    </svg>
    <svg class="corner bottom-right" viewBox="0 0 100 100">
      <polyline points="100,0 100,100 0,100" />
    </svg>

    <div class="panel-content">
      <slot />
      <v-chart :option="chartOption" autoresize style="height: 180px; margin-top: 1rem" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useThemeStore } from '@/stores/theme/theme';

// ECharts 引入
import { use } from 'echarts/core';
import VChart from 'vue-echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';

use([CanvasRenderer, LineChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent]);

const themeStore = useThemeStore();
const theme = computed(() => themeStore.currentTheme);

const canvas = ref<HTMLCanvasElement | null>(null);

const themeColorMap = {
  blue: ['#0ff', '#08f'],
  green: ['#0f0', '#0a4'],
  purple: ['#c0f', '#70f'],
};

const drawBorder = (ctx: CanvasRenderingContext2D, width: number, height: number, t: number) => {
  ctx.clearRect(0, 0, width, height);
  const [startColor, endColor] = themeColorMap[theme.value];
  const gradient = ctx.createLinearGradient(0, 0, width, height);
  gradient.addColorStop(0, startColor);
  gradient.addColorStop(1, endColor);
  ctx.strokeStyle = gradient;
  ctx.lineWidth = 2;
  const glow = Math.sin(t / 20) * 5 + 8;
  ctx.shadowBlur = glow;
  ctx.shadowColor = startColor;
  ctx.strokeRect(1.5, 1.5, width - 3, height - 3);
};

onMounted(() => {
  const c = canvas.value;
  if (!c) return;
  const ctx = c.getContext('2d');
  if (!ctx) return;

  const resize = () => {
    c.width = c.clientWidth;
    c.height = c.clientHeight;
  };

  resize();
  window.addEventListener('resize', resize);

  let t = 0;
  const animate = () => {
    t++;
    drawBorder(ctx, c.width, c.height, t);
    requestAnimationFrame(animate);
  };

  animate();
});

const chartOption = {
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70],
      type: 'line',
      smooth: true,
      areaStyle: {},
    },
  ],
};
</script>

<style scoped>
.tech-panel {
  --theme-color: #0ff;
  --theme-shadow: rgba(0, 255, 255, 0.3);
  position: relative;
  width: 100%;
  height: 500px;
  max-width: 800px;
  aspect-ratio: 3 / 2;
  margin: 1rem auto;
  background: radial-gradient(ellipse at center, #151525, #0b0b18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 25px var(--theme-shadow);
}

.tech-panel[data-theme='green'] {
  --theme-color: #0f0;
  --theme-shadow: rgba(0, 255, 0, 0.3);
}

.tech-panel[data-theme='purple'] {
  --theme-color: #c0f;
  --theme-shadow: rgba(192, 0, 255, 0.3);
}

.canvas-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  stroke: var(--theme-color);
  stroke-width: 3;
  fill: none;
  z-index: 2;
  opacity: 0.8;
}

.top-left {
  top: 0;
  left: 0;
}

.top-right {
  top: 0;
  right: 0;
  transform: rotate(90deg);
}

.bottom-left {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}

.bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

.panel-content {
  position: relative;
  z-index: 3;
  padding: 20px;
  color: var(--theme-color);
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
}
</style>
